import React, { useEffect, useState } from 'react';
import ReactECharts from 'echarts-for-react';
import { fetchVarietyCorrelation, getVarietiesByScoreRanges, handleData } from './utils';
import { Table } from 'antd';
import 'antd/dist/reset.css';

const FuturesCorrelation: React.FC = () => {
  const [aNameCounts, setANameCounts] = useState<{ aName: string; count: number }[]>([]);
  const [scoreTable, setScoreTable] = useState<any[]>([]);
  useEffect(() => {
    fetchVarietyCorrelation().then((data) => {
      console.log(data);
    });
  }, []);
  useEffect(() => {
    const data = handleData();
    const ranges = getVarietiesByScoreRanges();
    setANameCounts(data);
    // 生成表格数据
    const tableData = ranges.map((row, idx) => ({
      key: idx,
      threshold: `<=${row.threshold}`,
      added: row.added.join(', '),
      all: row.all.join(', '),
    }));
    setScoreTable(tableData);
  }, []);

  const option = {
    title: {
      text: '各 aName 属性数量对比',
      left: 'center',
    },
    tooltip: {},
    xAxis: {
      type: 'category',
      data: aNameCounts.map((item) => item.aName),
      axisLabel: { rotate: 45, interval: 0 },
    },
    yAxis: {
      type: 'value',
      name: '属性数量',
    },
    series: [
      {
        data: aNameCounts.map((item) => item.count),
        type: 'bar',
        itemStyle: {
          color: '#5470C6',
        },
      },
    ],
  };

  const columns = [
    { title: '分数区间', dataIndex: 'threshold', key: 'threshold', width: 100 },
    { title: '本阶段新增品种', dataIndex: 'added', key: 'added', width: 300 },
    { title: '本阶段所有品种', dataIndex: 'all', key: 'all' },
  ];

  return (
    <div>
      <h2>Futures Correlation</h2>
      <p>这是一个演示 DOM。</p>
      <ReactECharts option={option} style={{ height: 400 }} />
      <h3>分数区间品种分布</h3>
      <Table
        columns={columns}
        dataSource={scoreTable}
        pagination={false}
        bordered
        size="small"
        scroll={{ x: 900 }}
      />
    </div>
  );
};

export default FuturesCorrelation;
